
/**
 * @name uploader/index.less
 * @desc 上传附件组件的样式
 * @author yangliu at 2019-10-23
 */

@import '../../assets/constant.less';


:global {
  .file-upload-wrapper {
    position: relative;


    .file-operate {
      .btns {
        display: flex;

        .upload {
          display: inline-block;
          // .bg(@bg-white);
          // color: @bg-white-txt-color;
          padding: 0 20px;
          height: 32px;
          line-height: 32px;
          border-radius: 2px;
          cursor: pointer;
          margin-right: 20px;
          display: flex;
          justify-content: space-between;

          // fix firefox issue(default with has been set as 175px as wide)
          .ant-input {
            min-width: 0;
          }
          .ant-btn .ant-input .title{
              display: block;
              margin-right: 10px;
          }
          .title{
            width: 150px;
          }

          &.disabled {
            cursor: not-allowed;
          }
          i {
            margin-right: 8px;
          }

 
        }
      }

      .drop-zone {
        min-height: 170px;
        border: 2px dashed @primary-color;
        padding: 20px 30px;
        margin-top: 15px;
        margin-bottom: 10px;
        max-width: 700px;
        cursor: pointer;
        &.disabled {
          cursor: not-allowed;
        }
        .upload-drag-icon {
          text-align: center;

          i {
            font-size: 48px;
            color: @primary-color;
          }

        }

        .upload-text {
          margin: 0 0 4px;
          font-size: 16px;
          text-align: center;
        }

        .upload-hint {
          text-align: center;
        }
      }

      
    }

    .img-operate {
        position: relative;
        &.sigle-img {
            &.has-img {
                .upload-img {
                    .anticon {
                        font-size: 32px;
                    }
                }
            }
            .img-list {
                position: absolute;
                z-index: 0;
                img {
                    display: inline-block;
                    margin-right: 10px;
                    width: 80px;
                    height: 80px;
                    border: 1px solid rgb(180, 180, 180);
                }
            }
        }
        &.has-img {
            .upload-img {
                opacity: 0;
                background-color: rgba(255, 255, 255, .8);
            }
            .upload-img:hover {
                opacity: 1;
            }
        }
        .img-list {
            img {
                display: inline-block;
                margin-right: 10px;
                width: 80px;
                height: 80px;
            }
        }
        .upload-img {
            position: relative;
            display: inline-block;
            width: 80px;
            height: 80px;
            border: 1px solid rgb(180, 180, 180);
            text-align: center;
            line-height: 92px;
            cursor: pointer;
            z-index: 1;
            &.disabled {
                cursor: not-allowed;
            }
            .anticon {
                font-size: 40px;
                color: rgb(180, 180, 180);
            }
        }
    }

    .file-List {
      margin-top: 10px;
      align-items: center;
      line-height: 1.5;
      padding-left: 20px;
      .noFile {
        display: inline-block;
        height: 32px;
        line-height: 32px;
      }
      // &::before {
      //   content: "";
      //   margin-left: 15px;
      //   padding-left: 15px;
      //   border-left: 1px solid #c0c4cc;
      //   height: 100%;
      //   display: inline-block;
      //   vertical-align: middle;

      }
      .file {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        align-items: center;
        margin-left: 7px;
        padding: 4px;
        width: 90%;
        border:1px dashed @border-color-base;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        // .bg(@bg-color-third);

        .info {
          display: flex;
          align-items: center;

          .file-icon {
            width: 20px;
            height: 20px;
            margin-right: 20px;
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: cover;
            display: inline-block;
            background-image:url('../../assets/imgs/other.png');
            i {
              font-size: 18px;
            }

            &-doc,
            &-docx {
              background-image:url('../../assets/imgs/doc.png');
            }

            &-word {
              background-image:url('../../assets/imgs/word.png');
            }

            &-pdf {
              background-image:url('../../assets/imgs/pdf.png');
            }

            &-xlsx,
            &-xls {
              background-image:url('../../assets/imgs/excel.png');
            }

            &-ppt,
            &-pptx {
              background-image:url('../../assets/imgs/ppt.png');
            }

            &-png {
              background-image:url('../../assets/imgs/png.png');
            }

            &-jpg,
            &-jpeg {
              background-image:url('../../assets/imgs/jpg.png');
            }


            &-gif {
              background-image:url('../../assets/imgs/gif.png');
            }

            &-txt {
              background-image:url('../../assets/imgs/txt.png');
            }

            &-rar {
              background-image:url('../../assets/imgs/rar.png');
            }
          }
        }

        .operate {
          .anticon {
            font-size: 20px;
            margin-right: 20px;
            display: none;
          }
        }


        &:hover {
          border-color:@primary-color;

          .anticon {
            display: inline-block;
            cursor: pointer;

            &-download {
              &:hover {
                color: @primary-color;
              }
            }

            &-delete {
              &:hover {
                color: @error-color;
              }
            }
          }
        }

      }
    }
  }
